<template>
  <el-container>
    <el-aside width="380px" class="slider ml-16">
      <h1>当前宽度：{{screenWidth}}</h1>
      <div class="modules mt-16" v-for="(item,index) in moduleList" :key="index">
        <h2>{{item.group}}</h2>
        <module-entry class="module" v-for="module in item.modules" :key="module.name" :module="module"></module-entry>
      </div>
      <user-info></user-info>
    </el-aside>
    <el-main class="modules-main" style="">
      <router-view/>
    </el-main>
  </el-container>
</template>

<script>
import ModuleEntry from '@/components/ModuleEntry';
import UserInfo from '@/components/UserInfo';
export default {
  name: 'User',
  components: { UserInfo, ModuleEntry },
  data () {
    return {
      moduleList: [], // 模块
      screenWidth: document.body.clientWidth
    }
  },
  methods: {
    getModules () {
      let paramModule = {
        orgId: 1,
        navId: 1
      };
      this.$api.getModules(paramModule).then(res => {
        this.moduleList = res
      });
    }
  },
  watch: {
    // 监听浏览器窗口宽度变化
    screenWidth (newVal) {
      this.screenWidth = newVal
      // this.screenWidth > 1200 ? this.showSidebar = true : this.showSidebar = false
    }
  },
  created () {

  },
  mounted () {
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth;
        this.screenWidth = window.screenWidth
      })()
    };
    this.getModules()
  }
}
</script>

<style scoped lang="scss">
  .modules {
    width: 380px;
    background: rgba(255, 255, 255, 1);
    border-radius: 10px;
  }

  .modules-main {
    border-radius: 10px;
    background-color: #fff;
    margin: 0 16px;
  }
</style>
